https://codepen.io/hereiscasio/pen/MWgLONL?editors=1000

Used UI Component ( #0 )

UI 圖來源見此

Discussion

今日重點聚焦在用已經掌握的元件排出繁雜的版面，暫不引入新的 Vuetify 元件，明天會處理難度非常高的 Toolbar 滾動特效。BTW，你可能有發現，我很少在 Vue data 的 return 中宣告變數，反而很常在 created 中做這種事，新手可能不懂為何要這樣（ 當然若只是開發很簡單的東西，中小型或是沒處理到巨量資料的專案，每次宣告變數都只是在 data 的 return 中做，還真的不會怎樣 ）

背後用意是：不是每個變數都需要擁有 Reactivity，什麼意思呢？Reactivity 是一把雙面刃，並非在所有情況都適用，尤其若你開發的 Web App 有處理到大量資料的（ 例如一千筆 ），把這筆資料配給一個變數，宣告在 data 的 return 裡，就有機會出現效能問題（ 有些人可能知道 Gitlab 是用 Vue 開發的，他們內部對 Vue 的使用也是非常謹慎，甚至他們自己有出一套內部用的 Vue Usage Guideline ）。這部分資訊超出本系列文討論範疇，筆者會再於 blog 撰文深入講解